<template>
  <div class="real">
    <van-nav-bar
      class="real-bar"
      title="个人实名认证"
      left-arrow
      :border="false"
      @click-left="$router.go(-1)"
    />
    <van-tabs v-model="active" title-active-color="#2489f2">
      <van-tab title="手机运营商认证">
        <van-cell class="cell-one" center title="证件类型" value="身份证" />
        <div class="shoot">
          <div class="shoot-span-one">拍摄/上传您的二代身份证</div>
          <span class="shoot-span-two"
            >图片大小不超过10M,仅限png.jpg.jpeg.bmp格式文件</span
          >
          <div class="uploader-shoot">
            <van-uploader v-model="fileListOne" multiple :max-count="1">
              <div class="shoot-id">
                <van-icon class-prefix="iconfont iconshangchuanshenfenzheng" />
                <div class="shoot-id-div">点击拍摄/上传人像面</div>
              </div>
            </van-uploader>
            <van-uploader v-model="fileListTwo" multiple :max-count="1">
              <div class="shoot-id">
                <van-icon class-prefix="iconfont iconshangchuanshenfenzheng" />
                <div class="shoot-id-div">点击拍摄/上传国徽面</div>
              </div>
            </van-uploader>
          </div>
        </div>
        <van-notice-bar color="#9C9C9C" background="#F8F8F8" left-icon="info-o">
          以下信息自动识别，如识别有误，请重新上传。
        </van-notice-bar>
        <van-field
          class="van-field-call"
          v-model="identityUser.name"
          center
          :readonly="true"
          label="真实姓名"
          placeholder="从上传图片中自动识别"
        />
        <van-field
          class="van-field-call"
          v-model="identityUser.num"
          center
          :readonly="true"
          label="身份证号"
          placeholder="从上传图片中自动识别"
        />
        <van-field
          class="van-field-call"
          v-model="identityUser.num"
          center
          :readonly="true"
          label="手机号码"
          placeholder="请输入您的手机号码"
        />
        <van-field
          class="van-field-call"
          v-model="identityUser.num"
          center
          :readonly="true"
          label="验证码"
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button class="btn-code" size="small" type="primary"
              >获取验证码</van-button
            >
          </template>
        </van-field>
        <div class="btn-two">
          <van-button type="info" block>提交</van-button>
        </div>
      </van-tab>
      <van-tab title="人脸识别">
        <!-- 登录表单 -->
        <van-form class="form-user-name" @submit="onSubmit">
          <van-field
            v-model="user.name"
            center
            label="真实姓名"
            name="用户名"
            placeholder="请输入您的真实姓名"
          />
          <van-field
            v-model="user.num"
            center
            label="身份证号"
            name="身份证号"
            placeholder="请输入您的身份证号码"
            :rules="identity"
          />
          <div class="btn-end">
            <van-button block type="info" native-type="submit"
              >下一步</van-button
            >
          </div>
        </van-form>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // tabs索引页
      active: 0,
      // 用户信息
      user: {
        name: '',
        num: ''
      },
      // 身份证正则
      identity: [
        {
          pattern: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
          message: '身份证号格式错误'
        }
      ],
      // 身份证人像面
      fileListOne: [],
      // 身份证国徽面
      fileListTwo: [],
      // 身份证信息
      identityUser: {
        name: '43032119972205842',
        num: ''
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    onSubmit(values) {
      console.log('submit', values)
    },
    afterReadShoot(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    }
  }
}
</script>

<style scoped lang="less">
.real {
  background-color: #f8f8f8;
  padding-top: 128px;
  .real-bar {
    height: 128px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 38px;
    box-sizing: border-box;
    /deep/.van-nav-bar__title {
      font-size: 34px;
      font-weight: bold;
    }
    /deep/.van-icon {
      font-size: 48px;
      color: #000;
    }
  }
  // tab页
  /deep/.van-tab {
    font-size: 30px;
    color: #101010;
  }
  /deep/.van-tabs__line {
    width: 40px;
    background-color: #2489f2;
  }
  // 手机
  .cell-one {
    margin: 20px 0;
    .van-cell__value {
      color: #101010;
    }
  }
  .shoot {
    height: 396px;
    width: 100%;
    box-sizing: border-box;
    padding: 40px 41px;
    background-color: #fff;
    .shoot-span-one {
      font-size: 30px;
    }
    .shoot-span-two {
      font-size: 24px;
      color: #a0a0a0;
    }
    .uploader-shoot {
      display: flex;
      justify-content: space-between;
      margin-top: 26px;
      .shoot-id {
        width: 320px;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 1px dashed #e4e4e4;
        /deep/.iconfont {
          height: 84px;
          width: 84px;
          text-align: center;
          line-height: 84px;
          font-size: 35px;
          background-color: #2489f2;
          border-radius: 50%;
          color: #fff;
          margin-bottom: 10px;
        }
        .shoot-id-div {
          font-size: 24px;
          color: #2489f2;
        }
      }
      /deep/.van-uploader__preview-image {
        height: 200px;
        width: 320px;
      }
    }
  }
  .van-notice-bar {
    height: 64px;
    font-size: 24px;
    /deep/.van-notice-bar__left-icon {
      color: #2489f2;
    }
    /deep/.btn-code {
      background-color: #fff;
    }
  }
  .van-field-call {
    height: 108px;
    padding: 40px;
    /deep/.van-field__label {
      width: 118px;
    }
    .van-button--primary {
      background-color: #fff;
      color: #2489f2;
      border-width: 0;
      font-size: 30px;
    }
  }
  .btn-two {
    height: 136px;
    box-sizing: border-box;
    margin-top: 10px;
    background-color: #fff;
    padding: 20px 40px;
  }
  // 人脸
  .form-user-name {
    margin-top: 20px;
    .van-cell {
      height: 108px;
      font-size: 30px;
      /deep/.van-field__label {
        color: #101010;
        margin: 0;
      }
    }
  }

  .btn-end {
    width: 100%;
    height: 136px;
    box-sizing: border-box;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 20px 40px;
  }
}
</style>
